Day09 - 函數(02) - BMI - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 9

自我挑戰組

JavaScript 新手筆記系列第 9 篇

Day09 - 函數(02) - BMI

11th鐵人賽 javascript

hokou

2019-09-24 23:22:46

1381 瀏覽

分享至

前言

這次主要是練習函數的例子，試著把 BMI 用函數表示

問題

function fun(x)裡面的 x 是什麼？
- 是參數( parameter )，不是變數( variable )
- 在練習時發現顯示有問題(無法顯示)才發現，因為網頁是將 id 轉換到對應的變數，跟函數內的參數無關(前文描述已修改)
- VSCode 移到程式碼上會顯示提示跟狀態，才了解是參數而不是變數
Hoisting (提升)
- 在定義變數時，JS 會先將變數上移(提升)
- 還有一些比較複雜的部分，參考文章：
  - 我知道你懂 hoisting，可是你了解到多深？
  - 鐵人賽：JavaScript Function 與 Hoisting
- 參考下例，第一行先不看，可看出前後的定義不同

// var a; // 將 a 先 hoisting 至最上面，還未指定值
console.log(a) // 還未指定值，輸出 undefined
var a = 10 // 指定為10
console.log(a) // 已指定值，輸出 10

程式

index.html，維持不變

<body>
 <p>小明的體重為 <em id="weight"></em> 公斤</p>
 <p>身高為 <em id="height"></em> 公分</p>
 <p>BMI 計算的結果為：<em id="BMI"></em></p>
 <p>判斷為：<em id="ans"></em></p>
 <script src="JS/test.js"></script>
</body>

test.js

var weight = 60; // 重量
var height = 1.70; // 身高(公尺)
var BMI;
var ans;

// 計算 BMI
function BMIfun (weight,height){
 return weight / (height * height);
}

BMI = BMIfun(weight,height);  // 顯示 BMIfun(weight,height)的判斷結果
console.log(BMI);

// BMI 的判斷
function BMIans(BMI){
 if (BMI >= 18 && BMI <= 24){
 return "似乎還蠻正常的！";
        } else if (BMI > 24){
 return "似乎有點過胖囉！";
        } else {
 return "似乎有點過瘦囉！";
        }
}

ans = BMIans(BMI); // 顯示 BMIans(BMI)的判斷結果
console.log(ans);

document.getElementById('weight').textContent = weight;
document.getElementById('height').textContent = height * 100; // 公分
document.getElementById('BMI').textContent = BMI.toFixed(2);
document.getElementById('ans').textContent = ans;